import React, { Component } from 'react'
import { Grid,List} from 'antd-mobile'
import './index.scss' 
export default class index extends Component {
    imgs=[]
    state={
        photo:'',
        indexImg:-1
    }
    active=(index)=>{
        this.setState({indexImg:index})
    }
  
    selcet=(photo,text)=>{
        this.setState({photo:photo})
        this.props.setHeader(text)
    }
    constructor(props){
        super(props)
        for(let i=1;i<=20;i++){
            this.imgs.push({
                text:'头像'+i,
                img:require(`../../assets/images/头像${i}.png`).default
            })
        }
    }
    render() {
       
        return (
          
            
            <List>
                <div className="title">选择头像{this.state.photo?<img src={this.state.photo} alt="头像"></img>:''}</div>  
                <Grid columns={5}>
                    {
                        this.imgs.map((imgobj,index)=>{
                            return  (
                                <div key={imgobj.img} className={this.state.indexImg===index?'grid_active grid_img':'grid_img' } 
                                    onClick={()=>{this.selcet(imgobj.img,imgobj.text)}}
                                    onMouseDown={()=>{this.active(index)}} 
                                    onMouseUp={()=>{this.setState({indexImg:-1})}}
                                    onTouchStart={()=>{this.active(index)}}
                                    onTouchEnd={()=>{this.setState({indexImg:-1})}}
                                >
                                    <img  src={imgobj.img} alt="" />
                                    <div >{imgobj.text}</div>  
                                        
                                    
                                </div> 
                            )
                        })
                    }
                </Grid>
            </List>    

        )
    }
}
